<template>
  <div class="edit-container">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="content-breadcrumb">
      <el-breadcrumb-item :to="{ path: '/cage-manage' }">
        笼子列表
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ pageTitle }}</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="detail-box">
      <el-form>
        <el-form-item label="出身背景:">
          <div>{{ handleItem("background", dogInfo.background) }}</div>
        </el-form-item>
        <el-form-item label="宠物生日:">
          <div>{{ dogInfo.birthday }}</div>
        </el-form-item>
        <el-form-item label="笼子名称:" prop="cageId">
          <!-- <TemplateSelect
            :selectValue.sync="petForm.cageId"
            :selectList="options.cageId"
            placeholder="请选择笼子名称"
          ></TemplateSelect> -->
        </el-form-item>
        <el-form-item label="毛发特点:" prop="hairFeature">
          <div>{{ handleItem("hairFeature", dogInfo.hairFeature) }}</div>
        </el-form-item>
        <el-form-item label="毛发长度:" prop="hairLength">
          <div>{{ handleItem("hairLength", dogInfo.hairLength) }}</div>
        </el-form-item>
        <el-form-item label="狗狗名字:" prop="name">
          <div>{{ dogInfo.name }}</div>
        </el-form-item>
        <el-form-item label="来源:" prop="origin">
          <div>{{ handleItem("origin", dogInfo.origin) }}</div>
        </el-form-item>
        <el-form-item label="狗狗性格:" prop="personality">
          <div>{{ handleItem("personality", dogInfo.personality) }}</div>
        </el-form-item>

        <el-form-item label="图片:" prop="pictures">
          <div class="pic-uploader">
            <template v-if="dogInfo.pictures.length >= 1">
              <div
                class="maskbox"
                v-for="(item, index) in dogInfo.pictures"
                :key="item + index"
              >
                <img :src="item" class="pic" />
              </div>
            </template>
            <img v-else src="@/assets/img/picture.png" class="default-pic" />
          </div>
        </el-form-item>
        <el-form-item label="狗狗性别:" prop="sex">
          <div>{{ handleItem("sex", dogInfo.sex) }}</div>
        </el-form-item>
        <el-form-item label="狗狗体型:" prop="size">
          <div>{{ handleItem("size", dogInfo.size) }}</div>
        </el-form-item>

        <el-form-item label="狗狗绝育情况:" prop="sterilization">
          <div>{{ handleItem("sterilization", dogInfo.sterilization) }}</div>
        </el-form-item>
        <el-form-item label="小院id:" prop="yardId">
          <div>{{ dogInfo.yardId }}</div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import TemplateSelect from "@/components/template-el-select/TemplateSelect.vue"
import editMixin from "./mixins/editMixin.js"
export default {
  mixins: [editMixin],
  data() {
    return {
      pageTitle: "狗狗详情",
      id: "",
      dogInfo: {
        pictures: []
      }
    }
  },
  components: {
    // TemplateSelect
  },
  created() {
    this.id = this.$route.query.id
    this.init()
  },
  methods: {
    //页面初始化
    async init() {
      const res = await this.searchOneDog(this.id)
      this.dogInfo = res.data.dog
      console.log("----", this.dogInfo)
    },
    //由狗狗id获取该狗狗信息
    searchOneDog(id) {
      let params = {
        id: id
      }
      return new Promise((resolve, reject) => {
        this.$http
          .get("/dog-manage/searchOneDog", params)
          .then(res => {
            let nerArr
            if (res.data.dogImgList.length > 0) {
              nerArr = res.data.dogImgList.map(el => el.url)
            }
            res.data.dog["pictures"] = nerArr

            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    handleItem(item, value) {
      const newValue = this.options[item].filter(ele => ele.value == value)
      if (newValue.length > 0) {
        return newValue[0].label
      } else {
        return "未知"
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-container {
  width: 100%;
  .detail-box {
    margin-top: 40px;
  }
  .pic-uploader {
    width: 100%;
    display: flex;
  }
  .dpb {
    display: block;
    margin-top: 20px;
  }
  .maskbox {
    position: relative;
    .pic {
      width: 120px;
      height: 120px;
      border-radius: 4px;
      margin-right: 15px;
    }
    .default-pic {
      width: 46px;
      height: 46px;
    }
    &:hover .mask {
      visibility: visible;
    }
    .mask {
      visibility: hidden;
      position: absolute;
      border-radius: 4px;
      height: 120px;
      width: 120px;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      z-index: 10;
      > button {
        width: 100px;
        height: 32px;
        box-sizing: border-box;
        border: 1px solid #ffffff;
        border-radius: 4px;
        background: transparent;
        margin: 0 auto;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
      }
    }
  }
}
.readOnlyInput /deep/.el-input__inner {
  background: rgba(161, 160, 160, 0.3);
  &:hover {
    cursor: pointer;
  }
}
</style>
